<!-- 维度统计-筛选 -->
<template>
  <div class="sta-pop">
    <div class="filter-group">
      <!-- 派发时间 -->
      <div class="f-item" v-if="type == 'unasq'">
        <p class="title">
          <span class="name">派发时间</span>
        </p>
        <div class="time-btn-list">
          <van-cell is-link @click="showTimePopup">
            {{ entryTime.start || entryTime.end ? `${entryTime.start}~${entryTime.end}` : '请选择起止时间' }}
          </van-cell>
          <timePop title="选择任务派发时间" ref="timePop" @changeTime="changeTime" :sTime="startTime" :eTime="endTime"
            @cancel="cancelChangeTime" />
          <!-- <van-popup v-model="showYearDate" position="bottom">
            <van-datetime-picker v-model="currentYearDate" type="year-month" title="选择年月" />
          </van-popup> -->
        </div>
      </div>
      <!-- 分/子公司 -->
      <div class="f-item">
        <p class="title">
          <span class="name">分/子公司</span>
        </p>
        <div class="time-btn-list">
          <van-cell is-link @click="openCompanyPop">{{ componyObj.name || '请选择分/子公司' }}</van-cell>
          <van-popup v-model="showCompanyPop" position="bottom">
            <van-picker title="请选择分/子公司" show-toolbar :columns="componyList" @confirm="onSureCompony"
              @cancel="onCancelCompony" />
          </van-popup>
        </div>
      </div>
      <!-- 营业部 -->
      <div class="f-item">
        <p class="title">
          <span class="name">营业部</span>
        </p>
        <div class="time-btn-list">
          <van-cell is-link @click="openBranchPop">{{ branchObj.name || '请选择营业部' }}</van-cell>
          <van-popup v-model="showBranchPop" position="bottom">
            <van-picker title="请选择营业部" show-toolbar :columns="branchList" @confirm="onSureBranch"
              @cancel="onCancelBranch" />
          </van-popup>
        </div>
      </div>
    </div>
    <div class="filter-btn">
      <van-button plain type="info" size="small" @click="reset">重置</van-button>
      <van-button type="info" size="small" @click="ok">确定</van-button>
    </div>
  </div>
</template>

<script>
import TimePop from '@/components/timePop.vue'
import { jsonToTree } from '@/utils/util.js'
export default {
  components: { TimePop },
  props: {
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      orgid: '',
      // 筛选-入职时间
      entryTime: {
        start: '',
        end: ''
      },
      componyObj: {
        name: '',
        id: ''
      },
      branchObj: {
        name: '',
        id: ''
      },
      startTime: "2024-01-01",
      endTime: "2024-01-02",
      currentYearDate: '',
      showCompanyPop: false,
      showBranchPop: false,

      componyList: [],
      branchList: [],
      branchAllList: [],
      treeList: [],
      initTreelist: [],
    }
  },
  watch: {
    type(val) {
      if (val) {
        this.reset()
      }
    },
  },
  created() {
    if(this.$store.state.treeList) {
      this.branchList = []
      this.branchAllList = []
      this.treeList = this.$store.state.treeList || []
      this.orgid = this.treeList[0].id

      if (this.treeList && this.treeList.length && this.treeList[0] && this.treeList[0].children.length) {
        // 处理分/子公司列表数据
        this.initTreelist = JSON.parse(JSON.stringify(this.treeList[0].children)) // 原始树结构数据
        let newTreelist = JSON.parse(JSON.stringify(this.treeList[0].children))
        newTreelist = newTreelist.map(item => {
          item.children = null
          return { ...item }
        })
        this.componyList = newTreelist

        // 得到全部营业部数据列表
        this.treeList[0].children.forEach(ele => {
          if (ele.children && ele.children.length) {
            this.branchAllList.push(...ele.children)
          }
        })
      }
      this.branchList = this.branchAllList
    }
  },
  methods: {
    onSure(value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onChange(picker, value, index) {
      console.log(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      console.log('取消');
    },
    changeTime(timeVal) {
      this.entryTime = {
        start: timeVal.startTime,
        end: timeVal.endTime
      }
    },

    showTimePopup() {
      this.$refs.timePop.showPop()
      // this.showYearDate = true
    },
    cancelChangeTime() { },

    // 分/子公司操作
    openCompanyPop() {
      this.showCompanyPop = true
    },
    onCancelCompony() {
      this.showCompanyPop = false
    },
    onSureCompony(val) {
      this.orgid = val.id
      this.componyObj = {
        name: val.text,
        id: val.id
      }
      this.initTreelist.forEach(item => {
        if (item.id === val.id) {
          this.branchList = item.children
        }
      })
      this.branchObj = {
        name: '',
        id: ''
      }
      this.showCompanyPop = false
    },
    // 营业部操作
    openBranchPop() {
      this.showBranchPop = true
    },
    onCancelBranch() {
      this.showBranchPop = false
    },
    onSureBranch(val) {
      this.branchObj = {
        name: val.text,
        id: val.id
      }
      this.showBranchPop = false
    },

    reset() {
      this.componyObj = {
        name: '',
        id: ''
      }
      this.branchObj = {
        name: '',
        id: ''
      }
      this.entryTime = {
        start: '',
        end: ''
      }
      this.branchList = this.branchAllList
      this.orgid = this.treeList[0].id
    },
    ok() {
      let qry = {
        orgid: this.branchObj.id ? this.branchObj.id : this.orgid,
        start: this.entryTime.start,
        end: this.entryTime.end,
        bname: this.branchObj.name,
        cname: this.componyObj.name
      }
      this.$emit('on-emit', qry)

    }
  }

}
</script>

<style scope lang="less">
.sta-pop {
  height: 100%;

  .filter-group {
    height: calc(100% - 98px);
    // overflow: auto;

    .f-item {
      .title {
        display: flex;
        align-content: center;
        justify-content: space-between;

        .name {
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 500;
          font-size: 28px;
          color: #251717;
          line-height: 42px;
        }

        .more {
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          font-size: 26px;
          color: #7F8389;
          line-height: 40px;
          display: flex;
          align-items: center;
        }
      }

      .btn-list {
        flex-direction: row;
        justify-content: space-between;
        padding: 30px 0 40px;
      }

      .time-btn-list {
        .van-cell {
          border-bottom: 2px solid #ededed;
          padding: 28px 0;
          margin-bottom: 42px;

          .van-cell__value {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 26px;
            color: #7F8389;
          }

          .van-cell__right-icon {
            color: #c0c0c0;
          }

          &::after {
            border: none;
          }
        }

        .van-popup {
          border-radius: 30px 30px 0 0;
          width: 100%;
          height: 50%;
          max-height: 100%;
          right: 0;
          left: 0;
          bottom: 0;
        }
      }

      .default-btn {
        min-width: 170px;
        font-size: 24px;
        height: 64px;
        background: #F5F7FA;
        border-radius: 32px;
        border: 1px solid #F1F1F1;
        margin-right: 8px;
        padding: auto;
      }

      .active-btn {
        height: 64px;
        background: rgba(57, 127, 249, 0.1);
        border-radius: 32px;
        border: 1px solid #397FF9;
        color: #397FF9;
      }
    }
  }

  .filter-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 18px;
    padding-bottom: 38px;
    display: flex;
    justify-content: space-evenly;

    .van-button {
      width: 216px;
      height: 72px;
    }
  }
}
</style>